<template>
   <div class="d2" style="width: 100%;height: 100%;background-color:  #c1ab96;">
   <but></but>

        <div class="d1" style="width: 100%;height:50px;background: #c1ab96;position: fixed;top: 0;">
            <h2 class="h1" style="color: white;font-size: 20px;height: 100%;"><a style="display:inline-block;margin-top: 5%;margin-left: 2%;"> 商品分类 </a></h2>
        </div>
        <div class="d3" style="width: 100%;height: 80%;background-color: red;">
            <div class="d4" style="width: 30%;height: 100%;float: left;text-align: center;">
                <van-tree-select
                style="width:25%;height:100%;flex: 0; border:0px solid red;flex: 0;position: fixed;left: 0;top: 50px;"
                v-model:main-active-index="activeIndex"
                :items="items"
                @click="dj(activeIndex)"
                >
                </van-tree-select>
            </div>
            <div class="d5" style="width: 70%;height: 100vh;float: left;margin-left: 30%;">
                <a v-if="activeIndex === 0">
                    <One :num="activeIndex"></One>
                </a>
                <a :key="activeIndex">
                    <Two ></Two>
                </a>
              
            </div>
        </div>
        
    </div>
</template>

<script setup lang="ts">
import axios from "axios"
import but from '@/componets/but.vue'
import {useRouter} from 'vue-router'
import emitter from "@/Untils/bus.js"
import bus from 'vue3-eventbus'
import {onMounted, provide, reactive, ref} from 'vue'
import One from '@/views/shopCate/next/newOne.vue'
import Two from '@/views/shopCate/next/newTwo.vue'
// import Two2 from '@/views/shopCate/next/newTwo copy.vue'
// import Two3 from '@/views/shopCate/next/newTwo copy 2.vue'
// import Two4 from '@/views/shopCate/next/newTwo copy 3.vue'
    let activeIndex = ref(0);
    let items = reactive([])
    // provide("suibian",activeIndex)
    let dj=function(v:any){
        // emitter.emit("event",v)
        bus.emit('foo',v)
    }
    onMounted:{
        
        axios.get("https://console-mock.apipost.cn/app/mock/project/b0e8c554-8b0c-4a31-bfda-edfab429f639/cate"
        )
        .then(res=>{
            let vv=[]
            res.data.forEach(item=>{
                vv.push(item.parent)
            })
            vv.forEach((item,index)=>{
                items.push({"text":item})
            })
        })
    }
</script>

<style  >
    .d2{background-color: red;}
    /* .van-tree-select__content{width:0px;} */
    .van-tree-select__content {
    flex: 0;
    overflow-y: auto;
    background: var(--van-tree-select-content-background-color);
    -webkit-overflow-scrolling: touch;
        }

</style>
